<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>觉唯设计_用户体验设计分享平台</title>
        <!-- <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href=""> -->
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <link rel="stylesheet" href="css/head.css" >
        
        <style>
            body{
                overflow-x: hidden;
            }
        #bodyer{
            width: 100%;
            /* position: relative;
            top: -60px; */
            z-index: -10;

        }
        .banner{
            width: 100%;
            height: 600px;
            overflow: hidden;
        }
        .banner>img{
            width: 100%;
            z-index: 15;
            /* display: none; */
        }
        .banner>div{
            /* background-color: black; */
            color: rgb(243, 26, 26);
            /* width: 200px; */
            height: 100xp;
            position: relative;
            /* top: 50%; */
            top: 60%;
            /* left: 45%; */
            left: 60%;
            z-index: 30;
        }
        .banner>div>h3{
            font-size: 40px;
        }
        .ne{
            /* background-color: black; */
            
        }
        .ne li{
            color: gray;
            list-style-type: none;
            margin: 10px 20px;
        }
        .ne ul{
            margin-left: 100px;
        }
        .ne>div{
            display: flex;
            flex-direction:row;
        }
        .ne>div:nth-child(1)>div{
            color: gray;
            position: relative;
            top: 25px;
            left: 120px;
        }
        #lb{
            width: 100%;
            height: 600px;
            border: brown 1px solid;
        }
        #xq1{
            width: 100%;
            height: 600px;
            border: rgb(216, 143, 121) 1px solid;
        }
        .lb{
            width: 50%;
        }
    </style>
    </head>
    <body>
        <header class="header">
                <div class="logo">
                    <img src="img/jwlogo.png">
                </div>
                <div>
                    <ul>
                        <li>文章</li>
                        <li>欣赏</li>
                        <li>素材</li>
                        <li>活动</li>
                        <li>唯然</li>
                        <li>更多</li>
                    </ul>
                </div>
                <div class="login">
                    <div class="glyphicon glyphicon-search"></div>
                    <div>登录</div>
                    <div>注册</div>
                </div>
        </header>
        <header class="header2">
            <div>
                <div class="glyphicon glyphicon-align-justify"></div>
            </div>
            <div>
                <img src="img/jwlogo2.png" />
            </div>
            <div>
            <div class="glyphicon glyphicon-user"></div>
            </div>
        </header>
        <div id="bodyer">
            <div class="banner" > <!-- 首页横幅 -->
               
                <div>
                    <h3>热爱生活 享受乐趣</h3>
                    <h6>Love life and enjoy the fun.</h6>
                </div>
                <img  src="img/banner1.jpg"  >
            </div>
            <div class="ne"><!-- 首页横幅下方通知条 -->
                <div>
                <div class="glyphicon glyphicon-volume-up"></div>
                </div>
                <ul>
                    <li> [03-22]用户中心正式上线</li>
                    <li> [12-11]新增个人主页展示，越看越有爱</li>
                    <li> [12-04]觉唯官网新版升级上线</li>
                    <li> [09-01]新增QQ一键登录</li>
                    <li> [11-29]觉唯博客主题发布1.3版本</li>
                </ul>
            </div>
            <div id="lb"><!-- 通知条下轮播 -->
                <img class="lb" src="img/l1.jpg">
            </div>
            <div id="xq1"><!-- 轮播下详情1 -->

            </div>
        </div>
    </body>
</html>
<script src="js/jquery-3.5.1.min.js" ></script>
<script>
    $(document).ready(function(){
        $(".lb").hover(function(){
            var i=$(".lb").attr('src');
            // var sd=String(i).split();
            var sd=String(i).charAt(5);
            // alert(sd)
        });
        
    });
</script>